<?php
/**
 * File ini akan mengganti isi elemen body dari file index (file yang berisi option).
 * Karena akan menggantikan body, maka bagian head dan tag html dan body di sini dihapus.
 * 
 * Penggantian dilakukan dengan ajax, melalui controller n
 * setelah variabel result yakni variabel berisi hasil pencarian tiap query
 * beserta niapnya dan juga rata-rata dari seluruh niap dimasukkan ke file ini.
 * 
 */
?>
<?php
//<!DOCTYPE html>
//<html>
//    <head>
//        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
//        <link rel="stylesheet" href="<?=base_url()css/pirs.css" type="text/css" />
//        <script type="text/javascript" src="<?=base_url()script/jquery-1.6.1.js"></script>
//       <title>PIRS - Hasil Eksperimen</title>
//    </head>
//    <body>
?>
        <div id="container-wrapper" style="min-height: 100%">
            <div id="search-box" style="line-height: 72px">
                PIRS EXPERIMENT.
            </div>
            <div id="search-info" style="line-height: 48px; padding-left: 150px;width: 100%">
                Ditampilkan <?= sizeof($qresult) ?> hasil dalam <?= $time ?> detik. <b>Average NIAP </b>= <?=$avrniap?>.
            </div>
            <div id="result-pane" style="display: inline-block;min-height: 100%;" >
                <div  id="query-box">
                    <div class="button query-buck" onclick="rollupQuery()">
                        Prev
                    </div><hr/>
                    <div id="rollerQuery" style="overflow: hidden;max-height: 510px;min-height: 510px;">
                        <div id="innerRollerQuery">
                    <?php
                        foreach ($qresult as $qr){
                    ?>
                    <div class="button query-buck" onclick="showResult(<?=$qr->no?>)" title="<?=$qr->query?>">Query <?=$qr->no?></div>
                    <?php
                        }
                    ?>
                        </div>
                    </div>
                    <hr style="margin-top: 6px;"/>
                    <div class="button query-buck" onclick="rolldownQuery()">
                        Next
                    </div>
                </div>
                <?php
                    foreach ($qresult as $qr){
                ?>
                <div id="qresult<?=$qr->no?>" class="qresult" style="display: none">
                    <div class="query-info">
                        <div class="query-text" style="width: 100%;min-height:100px;max-height: 100px;overflow-y: scroll"><?=$qr->query?></div>
                        <table class="query-info-table">
                            <tr>
                                <td class="query-p query-mark">Presision : 0.812</td>
                                <td class="query-r query-mark">Recall : 0.812</td>
                                <td class="query-n query-mark">NIAP : <?=$qr->niap?></td>
                            </tr>
                        </table>
                    </div>
                    <div class="uprollerDocument" onclick="uprollDocument(<?=$qr->no?>)"></div>
                    <div id="result-box<?=$qr->no?>" class="result-box" style="min-height: 408px;max-height: 408px;">
                        <div id="inner-result-box<?=$qr->no?>">
                            <?php
                            foreach ($qr->results as $result) {
                            ?>
                                <div class="result" style="padding-left: 150px;">
                                    <div class="title"><a onclick="preview(this,<?=$result->no?>);"><?= $result->title ?></a></div>
                                </div>
                            <?php
                            }
                            ?>             
                        </div>
                    </div>
                    <div class="downrollerDocument" onclick="downrollDocument(<?=$qr->no?>)"></div>
                </div>
                <?php
                }
                ?>   
                <div id="result-preview" style="display: none">
                    <b>Author : </b>
                    <p id="result-author">Author</p>
                    <b>Content : </b>
                    <p id="result-content" class="content">Content</p>
                </div>
            </div>
        </div>
        <script>
            $("#result-preview").mouseleave(function(){
                $(this).fadeOut();
                $(".result.active").removeClass("active");
            });
            
            var marginTopQuery = 0;
            
            function rollupQuery(){
                if (marginTopQuery<0)
                    marginTopQuery+=510;
                $("#innerRollerQuery").animate({
                    marginTop:marginTopQuery
                }, 500, "linear", function(){});
            }
            function rolldownQuery(){
                var innerHeight = $('#innerRollerQuery').height();
                var diff = innerHeight + marginTopQuery;
                if (diff>510) marginTopQuery-=510;
                $("#innerRollerQuery").animate({
                    marginTop:marginTopQuery
                }, 500, "linear", function(){});
            }
            function uprollDocument(qno){
                var mt = $('#inner-result-box'+qno).css("marginTop");
                var imt = parseInt(mt, 10);
                if (imt<0){
                   imt+=510;
                }
                $('#inner-result-box'+qno).animate({
                    marginTop:imt
                }, 500, "linear", function(){});
                
            }
            function downrollDocument(qno){
                var mt = $('#inner-result-box'+qno).css("marginTop");
                var h = $('#inner-result-box'+qno).height();
                var imt = parseInt(mt, 10);
                var diff = h + imt;
                if (diff>510) imt-=510;
                $('#inner-result-box'+qno).animate({
                    marginTop:imt
                }, 500, "linear", function(){});
            }
		
                
            function preview (result,no){
                /*request document content*/
                $.get("<?=base_url()?>index.php/m/content/"+no, "", function(data){
                    $("#result-content").html(data.content);
                    $("#result-author").html(data.author);
                    $(".result.active").removeClass("active");
                    $(result).parents(".result").addClass("active");
                    $("#result-preview").show();
                }, "json");
            }
            
            function showResult(noQuery){
                $('.qresult').hide();
                $('#qresult'+noQuery).show();
            }
        </script>
<?php
//    </body>
//</html>
?>